<template>
  <div class="home">
    <el-container>
      <!-- <transition name="fade"> -->
        <el-aside width="220px" ref="aside" :style="{ height: asideHeight }" v-show="isCollapse">
          <div class="logo">
            <el-image
              style="width: 20px; height: 20px"
              :src="require('../assets/logo.png')"
              fit="cover"
            ></el-image>
            <h1>商品管理系统</h1>
          </div>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo el-menu"
            @close="handleClose"
            background-color="#3a4268"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="true"
          >
            <el-menu-item index="/index">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/product">商品主页</el-menu-item>
              <el-menu-item index="/addproduct">添加商品</el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">订单管理</span>
              </template>
              <el-menu-item index="/order">订单详情</el-menu-item>
            </el-submenu>
            <!-- <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">物流管理</span>
              </template>
              <el-menu-item index="4-1">物流详情</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">营销管理</span>
              </template>
              <el-menu-item index="5-1">优惠劵</el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">系统设置</span>
              </template>
              <el-menu-item index="6-1">背景设置</el-menu-item>
            </el-submenu> -->
          </el-menu>
        </el-aside>
      <el-container>
        <el-header class="header-layout">
          <el-image
            style="width: 20px; height: 20px"
            :src="require('../assets/retract.png')"
            fit="cover"
            @click="isCollapse = !isCollapse"
          ></el-image>
          <div class="header-option">
            <el-image
              style="width: 22px; height: 22px"
              :src="require('../assets/help.png')"
              fit="cover"
            ></el-image>
            <el-image
              style="width: 20px; height: 20px"
              :src="require('../assets/remind.png')"
              fit="cover"
            ></el-image>
            <div class="avatar" @click="avatarHandler">
              <el-avatar :size="30" :src="circleUrl" @error="errorHandler">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
              <el-image
                style="width: 10px; height: 10px; margin-left: 5px"
                :src="require('../assets/downArrow.png')"
                fit="cover"
              ></el-image>
            </div>
          </div>
        </el-header>
        <el-main :style="{ height: mainHeight }">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      isCollapse: true,
      asideHeight: "100vh",
      mainHeight: "100%",
    };
  },
  methods: {
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    errorHandler() {
      return true;
    },
    avatarHandler() {
      this.$router.push({ path: "/login" });
    },
  },
  created() {
    // this.axios({
    //   method: "get",
    //   url: "http://localhost:3000/",
    // }).then((res) => {
    //   if (res.data.code == "200" && res.data.status == "406") {
    //     this.$message({
    //       message: res.data.msg,
    //       type: "warning",
    //     });
    //   }
    // });
    this.asideHeight = window.innerHeight + "px";
    this.mainHeight = window.innerHeight - 60 + "px";
  },
  updated() {
    this.asideHeight = window.innerHeight + "px";
    this.mainHeight = window.innerHeight - 60 + "px";
  },
};
</script>

<style lang="less">
.home {
  .el-header,
  .el-footer {
    background-color: #fff;
    color: #333;
    line-height: 60px;
    background-color: #f3f5f7;
  }

  .el-aside {
    background-color: #3a4268;
    color: #333;
  }

  .el-main {
    color: #333;
    padding: 0;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    transform: translateX(-220px);
  }

  .logo {
    display: flex;
    align-items: center;
    align-items: center;
    padding: 15px 20px 0;
    h1 {
      color: #fff;
      font-size: 20px;
      margin-left: 5px;
      align-self: center;
    }
  }
  .el-menu {
    border: 0;
  }
  .header-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 120px;
      .avatar {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>
